<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的信息-MeetHere</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <style type="text/css">
        body{
            background-color: #f5f5f5;
            padding-top: 80px;
        }
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div th:include="layout/header :: header(user=${session.user},flag=${session.user}!=null,page='user_info')"></div>

<main class="container">
    <div class="card bg-white rounded col-8 mx-auto p-0">
        <div class="card-header py-3 text-center bg-primary text-light">
            <h5 class="card-title mb-0">我的信息</h5>
        </div>
        <form class="my-5 col-8 mx-auto" role="form" th:action="@{updateUser.do}" method="post" enctype="multipart/form-data">
            <div class="form-group mb-4 row">
                <div class="media col-3">
                    <h6 class="align-self-center ml-auto">昵称：</h6>
                </div>
                <div class="col-8">
                    <label for="userName" class="sr-only">昵称</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                        </div>
                        <input type="text" name="userName" class="form-control" id="userName" th:value="${session.user.userName}" required
                               data-toggle="tooltip" title="最多18个字符" data-placement="right" data-trigger="manual">
                    </div>
                </div>
            </div>
            <div class="form-group mb-4 row">
                <div class="media col-3">
                    <h6 class="align-self-center ml-auto">用户名：</h6>
                </div>
                <div class="col-8">
                    <h6 class="text-muted font-weight-normal" th:text="${session.user.userID}"></h6>
                    <input type="text" name="userID" class="form-control" id="userID" hidden th:value="${session.user.userID}">
                </div>
            </div>
            <div class="form-group mb-4 row">
                <div class="media col-3">
                    <h6 class="align-self-center ml-auto">邮箱：</h6>
                </div>
                <div class="col-8">
                    <label for="email" class="sr-only">邮箱</label>
                    <input type="text" name="email" class="form-control" id="email" th:value="${session.user.email}" onchange="emailVerify()"
                           data-toggle="tooltip" title="最多32个字符" data-placement="right" data-trigger="manual">
                </div>
            </div>
            <div class="alert alert-danger col-6" style="margin-left: 27%" hidden id="alertEmail"><span class="glyphicon glyphicon-info-sign"></span> 请输入正确的邮箱！</div>

            <div class="form-group mb-4 row">
                <div class="media col-3">
                    <h6 class="align-self-center ml-auto">手机：</h6>
                </div>
                <div class="col-8">
                    <label for="phone" class="sr-only">手机</label>
                    <input type="text" name="phone" class="form-control" id="phone" th:value="${session.user.phone}" onchange="phoneVerify()"
                           data-toggle="tooltip" title="最多11位数字" data-placement="right" data-trigger="manual">
                </div>
            </div>
            <div class="alert alert-danger col-6" style="margin-left: 27%" hidden id="alertPhone"><span class="glyphicon glyphicon-info-sign"></span> 请输入正确的手机号！</div>

            <div class="form-group mb-4 row">
                <div class="media col-3 d-flex">
                    <h6 class="align-self-start ml-auto pt-1">头像：</h6>
                </div>
                <div class="col-8">
                    <img th:src="${session.user.picture} == '' ? 'default.jpg': ${session.user.picture}" alt="" style="height: 100px; width: 100px">
                    <label for="picture" class="sr-only">Example file input</label>
                    <input type="file" class="form-control-file mt-2" id="picture" name="picture">
                </div>
            </div>
            <div class="col-3 mx-auto mb-4">
                <a class="badge" data-toggle="collapse" href="#collapseExample" id="pwdSwitch"><h6>修改密码</h6></a>
            </div>
            <div class="collapse" id="collapseExample">
                <div class="form-group mb-4 row">
                    <div class="media col-3">
                        <h6 class="align-self-center ml-auto">原密码：</h6>
                    </div>
                    <div class="col-8">
                        <label for="passwordOld" class="sr-only">原密码</label>
                        <input type="password" class="form-control" id="passwordOld" onchange="checkPassword()"
                               data-toggle="tooltip" title="最多16个字符" data-placement="right" data-trigger="manual">
                    </div>
                </div>
                <div class="alert alert-danger col-6" style="margin-left: 27%" hidden id="alertPassword"><span class="glyphicon glyphicon-info-sign"></span> 密码错误！</div>
                <div class="form-group mb-4 row">
                    <div class="media col-3">
                        <h6 class="align-self-center ml-auto">新密码：</h6>
                    </div>
                    <div class="col-8">
                        <label for="passwordNew" class="sr-only">新密码</label>
                        <input type="password" class="form-control" id="passwordNew"
                               data-toggle="tooltip" title="最多16个字符" data-placement="right" data-trigger="manual">
                    </div>
                </div>
            </div>
            <div class="mt-2">
                <button class="btn btn-lg btn-primary btn-block col-4 m-auto" type="submit" id="submit">保 存</button>
            </div>

        </form>
    </div>

</main>
<script type="text/javascript">
    let showPWD = false;
    let flag = [false, false, false];
    $("#pwdSwitch").click(function(){
        showPWD = !showPWD;
        console.log(showPWD);
        if(!showPWD){
            $("#passwordOld").attr("value", "").removeAttr("name").removeAttr("required");
            $("#passwordNew").attr("value", "").removeAttr("name").removeAttr("required");
            flag[0] = false;
        }else{
            $("#passwordOld").attr("name", "passwordOld");
            $("#passwordNew").attr("name", "passwordNew");
            $("#passwordOld").attr("required", "required");
            $("#passwordNew").attr("required", "required");
        }
        justifySubmit();
    });
    // $("form").submit(function(){
    //     console.log("success");
    // });

    $("#picture").change(function (e){
        console.log('value='+$(this).val());
        console.log(e);
        var fileMsg = e.currentTarget.files;
        var fileName = fileMsg[0].name;
        console.log(fileName);//js-dom.png
        //大小 字节
        var fileSize = fileMsg[0].size;
        console.log(fileSize);//350061
        //类型
        var fileType = fileMsg[0].type;
        console.log(fileType);//image/png
        // 判断文件类型
        var type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
        if(type!="/jpg" && type!="/gif" && type!="/jpeg" && type!="/png"){
            alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！\n请重新上传！");
            $('#picture').val('');
            return false;
        }
    });

    function checkPassword(){
        if(!showPWD){
            return;
        }
        var password =  $("#passwordOld").val();
        var userID =$("#userID").val();
        if(password==""){
            if (flag[0]) {
                $("#alertPassword").attr('hidden', 'hidden');
                flag[0] = false;
            }
            justifySubmit();
            return;
        }
        $.ajax({
            url:"checkPassword.do",
            dataType: "Json",
            type: "get",
            data:{
                userID:userID,
                password: password
            },
            success: function(msg){
                if(!msg) {
                    if(!flag[0]){
                        flag[0] = true;
                        $("#alertPassword").removeAttr('hidden');
                    }
                }
                else{
                    if(flag[0]){
                        flag[0] = false;
                        $("#alertPassword").attr('hidden', 'hidden');
                    }
                }
                justifySubmit();
            }
        });
    }
    function justifySubmit() {
        console.log(flag);
        for(let i = 0; i < 3; i++){
            if(flag[i]){
                $("#submit").attr('disabled',true);
                return;
            }
        }
        $("#submit").attr('disabled',false);
    }

    function phoneVerify() {
        var phone =  $("#phone").val();
        if(phone =="") {
            if (flag[1]) {
                $("#alertPhone").attr('hidden', 'hidden');
                flag[1] = false;
            }
            justifySubmit();
            return;
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(phone)) {
            if(!flag[1]){
                flag[1] = true;
                $("#alertPhone").removeAttr('hidden');
            }
        } else {
            if(flag[1]){
                flag[1] = false;
                $("#alertPhone").attr('hidden', 'hidden');
            }
        }
        justifySubmit();
    }
    function emailVerify(){

        var email = $("#email").val();
        if(email =="") {
            if (flag[2]) {
                $("#alertEmail").attr('hidden', 'hidden');
                flag[2] = false;
            }
            justifySubmit();
            return;
        }
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email)){
            if(!flag[2]){
                flag[2] = true;
                $("#alertEmail").removeAttr('hidden');
            }
        }else{
            if(flag[2]){
                flag[2] = false;
                $("#alertEmail").attr('hidden', 'hidden');
            }
        }
        justifySubmit();
    }

    $("#userName").keyup(function(){
        let len = $(this).val().length;
        if(len > 17){
            $(this).val($(this).val().substring(0,18));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#userName").tooltip('hide');
            }, 2000);
        }
    });
    $("#email").keyup(function(){
        let len = $(this).val().length;
        if(len > 31){
            $(this).val($(this).val().substring(0,32));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#email").tooltip('hide');
            }, 2000);
        }
    });
    $("#phone").keyup(function(){
        let len = $(this).val().length;
        if(len > 10){
            $(this).val($(this).val().substring(0,11));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#phone").tooltip('hide');
            }, 2000);
        }
    });
    $("#password").keyup(function(){
        let len = $(this).val().length;
        if(len > 15){
            $(this).val($(this).val().substring(0,16));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#password").tooltip('hide');
            }, 2000);
        }
    });
    $("#passwordNew").keyup(function(){
        let len = $(this).val().length;
        if(len > 15){
            $(this).val($(this).val().substring(0,16));
            $(this).tooltip('show');
            setTimeout(function(){
                $("#passwordNew").tooltip('hide');
            }, 2000);
        }
    });
    $("form").submit(function () {
        alert("保存成功！");
        window.location.href='/user_info';
    });

</script>
<div th:include="layout/footer :: Footer"></div>
</body>
</html>